

<template>
  <div class="category-page">
    <page-header title="商品分类"></page-header>
    <div class="search-bg">
      <Search></Search>
      <div class="category-tabs">
        <div class="category-tab" :class="{'active-tab':selectFirstCategory === category.id}" v-for="category in firstCategoryList" :key="category.id" @click="firstCategoryChange(category.id)">
          <div class="tab-img-wrapper">
            <img class="tab-img" :src="category.imgUrl">
          </div>
          <div class="tab-name">
            {{category.name}}
          </div>
        </div>
      </div>
    </div>
    <div class="good-wrapper">
      <div class="good-categorys">
        <div class="good-category" :class="{'active-category': selectedCategory === item.id}" v-for="item in categoryData" :key="item.id" @click="selectCategory(item.id)">
          {{item.name}}
        </div>
      </div>
      <div class="good-list">
        <div class="ad-box">
          <img class="ad-img" src="https://image-oss.dangaoss.cn/cats/cats_20250218235507_819.jpg" />
        </div>
        <div class="list-divider"></div>
        <div class="good-empty" v-if="goodList.length === 0">
          <van-empty description="暂无数据" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="40" />
        </div>
        <div class="good-item" v-for="good in goodList" :key="good.id" @click="toDetail(good.id)">
          <img class="good-img" :src="good.imagePath">
          <div class="good-info">
            <div class="good-info-title text-overflow">
              {{good.title}}
            </div>
            <div class="good-info-desc text-overflow">
              {{good.description}}
            </div>
            <div class="good-info-tag">
              <van-tag class="good-tag" plain type="danger">同城配送</van-tag>
              <van-tag class="good-tag" plain type="danger">当日达</van-tag>
            </div>
            <div class="good-info-price">
              {{good.price}}
            </div>
            <div class="good-btn" @click="toBuy(good.id)">
              <i class="nbicon nbgouwuche" style="color: #fff;font-size: 14px"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <NavBar></NavBar>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import {useRoute, useRouter} from 'vue-router'
import { showLoadingToast, closeToast } from 'vant'
import {fetchCategory, fetchFirstCategory, fetchGoodListByCategory} from "@/service/good";
const router = useRouter()
const route = useRoute()
const query = route.query
// composition API 获取 refs 的形式
//#region 分类
const firstCategoryList = ref<any[]>([])
const selectFirstCategory = ref('')
const getFirstCategory = async () => {

  showLoadingToast('加载中...')
  const res = await fetchFirstCategory()
  firstCategoryList.value = res.data || []
  firstCategoryList.value.forEach((item) => {
    if(item.id==34) item.imgUrl = 'https://image-oss.dangaoss.cn/cats/cats_20230724163921_426.png'
    if(item.id==45) item.imgUrl = 'https://image-oss.dangaoss.cn/cats/cats_20230724164322_13.png'
    if(item.id==54) item.imgUrl = 'https://image-oss.dangaoss.cn/cats/cats_20230724164616_369.png'
    if(item.id==61) item.imgUrl = 'https://image-oss.dangaoss.cn/cats/cats_20230724165446_8.png'
    if(item.id==66) item.imgUrl = 'https://image-oss.dangaoss.cn/cats/cats_20230724165601_819.png'
    if(item.id==76) item.imgUrl = 'https://image-oss.dangaoss.cn/cats/cats_20230726172545_327.png'
  })
  if(firstCategoryList.value.length>0) {
    let id = firstCategoryList.value[0].id
    // 如果路由有参数，就选对应的分类
    if(query.categoryId) {
      firstCategoryList.value.forEach(item => {
        if(item.id === query.categoryId) id = item.id
      })
    }
    firstCategoryChange(id)
  }

  closeToast()
}
const firstCategoryChange = (id: string) => {
  selectFirstCategory.value = id
  getCategory()
}
//二级分类
const categoryData = ref<any[]>([])
const selectedCategory = ref('')
const getCategory = async () => {
  showLoadingToast('加载中...')
  const res = await fetchCategory(selectFirstCategory.value, 3)
  categoryData.value = res.data
  if(categoryData.value.length>0) selectCategory(categoryData.value[0].id)
  closeToast()
}
const selectCategory = async (id: string) => {
  selectedCategory.value = id
  await getGoodList()
}
//#endregion

//#region 获取商品
const goodList = ref<any[]>([])
const getGoodList = async () => {
  showLoadingToast('加载中...')
  const res = await fetchGoodListByCategory(selectFirstCategory.value, selectedCategory.value)
  goodList.value = res.data.list || []
  closeToast()
}
// #endregion

const toDetail =(id: string) => {
  router.push({
    path: '/product',
    query: {
      id: id,
    }
  })
}
const toBuy =(id: string) => {
  router.push({
    path: '/product',
    query: {
      id: id,
    }
  })
}

onMounted( () => {
  getFirstCategory()
})

</script>
<style lang="less" scoped>
  @import '../common/style/mixin';
  .category-page {
    height: calc(100vh - 64px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .search-header {
      background: red;
      width: 100%;
      height: 100px;
      .header-search {
        display: flex;
        width: 80%;
        height: 20px;
        line-height: 20px;
        margin: 10px 0;
        padding: 5px 0;
        color: #232326;
        background: #F7F7F7;
        border-radius: 20px;
        .nbSearch {
          padding: 0 10px 0 20px;
          font-size: 17px;
        }
        .search-title {
          font-size: 12px;
          color: #666;
          line-height: 21px;
        }
      }
    }
    .search-bg {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('https://image-oss.dangaoss.cn/rests/rests_20230607152253_570.jpg');
    }
    .category-tabs {
      height: 94px;
      width: 100%;
      display: flex;
      align-items: center;
      overflow-x: auto;
      .category-tab {
        display: flex;
        flex-direction: column;
        width: 60px;
        align-items: center;
        justify-content: center;
        margin: 10px;
        .tab-img-wrapper {
          width: 54px;
          height: 54px;
          background: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          .tab-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }
        .tab-name {
          font-weight: bold;
        }
      }
      .active-tab {
        .tab-img-wrapper {
          background: @primary;
        }
        .tab-name {
          color: @primary;
        }
      }
    }
    .good-wrapper {
      flex: 1;
      overflow: hidden;
      width: 100vw;
      display: flex;
      .good-categorys {
        height: 100%;
        width: 100px;
        flex-shrink: 0;
        background: #f5f5f5;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        .good-category {
          position: relative;
          flex-shrink: 0;
          width: 100%;
          height: 56px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          border-bottom: 1px solid #eee;
        }
        .active-category {
          background: #fff;
          &::before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: @primary;
          }
        }
      }
      .good-list {
        height: 100%;
        flex: 1;
        display: flex;
        overflow-y: auto;
        flex-direction: column;
        .ad-box {
          width: 100%;
          padding: 10px;
          .ad-img {
            border-radius: 12px;
            width: 100%;
          }
        }
        .list-divider {
          margin-left: 10px;
          width: calc(100% - 10px);
          height: 1px;
          background: @primary;
        }
        .good-empty {
          width: 100%;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .good-item {
          position: relative;
          margin-left: 10px;
          flex-shrink: 0;
          width: 100%;
          padding: 10px;
          padding-left: 0;
          display: flex;
          border-bottom: 1px solid #eee;
          .good-img {
            width: 100px;
            height: 100px;
            border-radius: 12px;
          }
          .good-info {
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            width: calc(100% - 100px);
            .good-info-title {
              font-size: 14px;
              font-weight: bold;
            }
            .good-info-desc {
              margin-top: 8px;
              font-size: 12px;
              width: 100%;
            }
            .good-info-tag {
              margin-top: 5px;
              display: flex;
              width: 100%;
              overflow: hidden;
              .good-tag {
                margin-right: 5px;
              }
            }
            .good-info-price {
              margin-top: 5px;
              font-size: 16px;
              color: #ff0000;
              font-weight: bold;
              &::before{
                content: "￥";
                font-size: 12px;
              }
            }
          }
          .good-btn {
            position: absolute;
            bottom: 0;
            right: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: @primary;
          }
        }
      }
    }
  }
</style>